import { useContext } from "react";
import { MemberType } from "../Member";
import { MemberContext } from "../../contexts/Member";
import Render from "../Render";
import { InfoCircleFilled, Loading3QuartersOutlined, UsergroupAddOutlined } from "@ant-design/icons";

export type MessageType = {
    id: number;
    chatTypeId: string;
    senderId: number,
    receiverId: number,
    chatId: number,
    messageTypeId: string;
    content: string;
    member: MemberType;
    status: number;
    createdAt: string;
    memoId?: number;
}

export default function Message({message}: {
    message: MessageType;
}) {
    const { member } = useContext(MemberContext);
    // if(!member) {
    //     return <></>;
    // }
    console.log(message);
    if(message?.messageTypeId === 'notice') {
        return <div className="flex gap-2 justify-center items-center text-gray-500 text-sm">
            <div><UsergroupAddOutlined /></div>
            <div>{message?.content}</div>
        </div>;
    }
    if(!message?.member) {
        return <></>;
    }
    if(message?.member?.id !== member?.id) {
        return <Rival message={message} member={message.member} />;
    }
    return <Mine message={message} member={member} />;
}

function Mine({message, member}: {
    message: MessageType;
    member: MessageType["member"];
}) {

    return <div className="flex w-full justify-end">
        <div className="relative max-w-[88%] flex items-start justify-end gap-4">
            <div className="flex flex-col gap-2">
                <div className="relative rounded bg-green-500 shadow px-4 py-2">
                    <div className="absolute w-0 h-0 border-[8px] border-transparent border-l-green-500 border-solid -right-[15px]"></div>
                    <div>{message?.content}</div>
                </div>
                <Render.Time className='text-xs text-gray-500' value={message.createdAt} />
            </div>
            <div className="w-12 h-12 flex items-center justify-center bg-gray-100 shrink-0">
                <img src={member.avatar} alt="user avatar" className="w-full h-full rounded" />
            </div>
            {
                message.status === 1
                    ? <div className="absolute -left-6"><Loading3QuartersOutlined spin /></div>
                    : <></>
            }
            {
                message.status === 2
                    ? <div className="absolute -left-6 text-red-500"><InfoCircleFilled /></div>
                    : <></>
            }
        </div>
    </div>;
}

function Rival({message, member}: {
    message: MessageType;
    member: MessageType["member"];
}) {

    return <div className="max-w-[88%] flex items-start justify-start gap-4">
        <div className="w-12 h-12 flex items-center justify-center bg-gray-100 shrink-0">
            <img src={member.avatar} alt="user avatar" className="w-full h-full rounded" />
        </div>
        <div className="flex flex-col gap-2">
            <div className="text-sm line-clamp-1">{member.username}</div>
            <div className="relative rounded bg-gray-100 shadow px-4 py-2">
                <div className="absolute w-0 h-0 border-[8px] border-transparent border-r-gray-100 border-solid -left-4"></div>
                <div>{message?.content}</div>
                {
                    message.status === 1
                        ? <div className="absolute -right-6 top-0"><Loading3QuartersOutlined spin /></div>
                        : <></>
                }
                {
                    message.status === 2
                        ? <div className="absolute -right-6 top-0 text-red-500"><InfoCircleFilled /></div>
                        : <></>
                }
            </div>
            <Render.Time className='text-xs text-gray-500' value={message.createdAt} />
        </div>
    </div>;
}